﻿
@{
    ViewBag.Title = "VueJs";
}
<style>

</style>
<div class="x_panel">
    <!--beginHead-->
    <div class="x_title">
        <h2>VueTest <small>HANS</small></h2>
        <ul class="nav navbar-right panel_toolbox">
            <li>
                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <!--endHead-->
    <div class="x_content">
      <div  id="vueapp1">
          <div v-html="message">

          </div>
      </div>
        <div id="vueapp2">
            <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
            <br><br>
            <div v-bind:class="{'bg-success': class1}">
                directiva v-bind:class
            </div>
        </div>
        <div id="app">
            <mt-button v-on:click.native="handleClick">按钮</mt-button>
        </div>
        <div id="vueapp3">
           <button type="button" v-on:click="handleClick2">弹出</button>
        </div>

        <div class="page-actionsheet">
            <h1 class="page-title">Action Sheet</h1>
            <div class="page-actionsheet-wrapper">
                <mt-button v-on:click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
                <mt-button v-on:click.native="sheetVisible2 = true" size="large">不带取消按钮的 action sheet</mt-button>
            </div>
            <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
            <mt-actionsheet :actions="actions2" v-model="sheetVisible2" cancel-text=""></mt-actionsheet>
        </div>
    </div>
</div>
@section Scripts{
    <script type="text/javascript">

        export default {
            data() {
                return {
                    sheetVisible: false,
                    sheetVisible2: false,
                    actions: [],
                    actions2: []
                };
            },

            methods: {
                takePhoto() {
                    console.log('taking photo');
                },

                openAlbum() {
                    console.log('opening album');
                },

                goBack() {
                    history.go(-1);
                }
            },

            mounted() {
                this.actions = [{
                    name: '拍照',
                    method: this.takePhoto
                }, {
                    name: '从相册中选择',
                    method: this.openAlbum
                }];
                this.actions2 = [{
                    name: '确定'
                }, {
                    name: '返回上一步',
                    method: this.goBack
                }];
            }
        };
        var vueData ={
            Txt: "kadlfmldlfml"
        };
        new Vue({
            el: '#vueapp1',
            data: {
                message: vueData.Txt
            }
        });
        var vue2 = new Vue({
            el: '#vueapp2',
            data:{
                class1: false
            }
        });
        new Vue({
            el: '#app',
            methods: {
                handleClick: function () {
                    this.$toast('Hello world!')
                }
            }
        });
        new Vue({
            el: '#ueapp3',
            methods: {
                handleClick2: function () {
                    Toast({
                        message: '操作成功',
                        iconClass: 'icon icon-success'
                    })
                }
            }
            

        });

    </script>    
}

